import Meta from "../../components/Meta";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import { useRouter } from 'next/router';
import { transData } from "../../utils/tool";
import { request } from "../../utils/request";
import { Tabs, Row, Col,message} from 'antd';
import Profile from '../../components/Account/Profile'
import Address from '../../components/Account/Address'
import OrderList from "../../components/Account/OrderList";
import { useEffect } from "react";
import { useState } from "react";
import {basePath} from '../../utils/tool';
const { TabPane } = Tabs;
export default function Account(props) {
  console.log('process.env1', process.env.APIURL)
  const router = useRouter()
  const [user, setUser] = useState()
  const [defaultKey,setKey] = useState('1');
  const getCurrentUser = async () => {
    const ret = await request(`${props.apiUrl}/api/user/currentUser`, {})
    if (ret.code === 100000) {
      localStorage.setItem('user', JSON.stringify(ret.data))
      setUser(ret.data)
    }

  }

  const [number] = useState(0);
  const [currency, setCurrency] = useState('rmb');

  const triggerChange = (changedValue) => {
    onChange?.({
      number,
      currency,
      ...value,
      ...changedValue,
    });
  };

  const [setIsModalVisible] = useState(false);
  const [orderData, setOrder] = useState([]);
 
  const getOrderList = async () => {
    console.log('process', process.env.APIURL);
    const ret = await request(`${basePath()}/api/order/paidList`);
    if (ret.code === 100000) {
      const arr = []
      ret.data.forEach(item=>{
        item.goods.forEach(items=>{
          arr.push(items)
        })
      })
      console.log('arr',arr)
      setOrder(arr)
    
    } else {
     
    }
  }
  const showModal = () => {
    if (!localStorage.getItem('token')) {
      Modal.confirm({
        title: 'Please login',
        content: 'You have to login to do next step',
        onOk() {
          router.push('/account/login');
        },
      })


      return;
    }
    setIsModalVisible(true);
  };
 
  useEffect(() => {
    
    if(router.query.key){
      console.log('router',router.query.key)
      setKey(router.query.key)
    }
    getCurrentUser()
    getOrderList()
  }, [])
  return (
    <>
      <Meta>
        <title>NINAMOKA-Account</title>
      </Meta>
      <Header />
      {/* <Nav navData={props.navData} /> */}
      <Row className="account">
        <Col xs={1} md={3}></Col>
        <Col xs={22} md={18}>
          <Tabs defaultActiveKey={defaultKey} tabPosition="left" activeKey={defaultKey} onChange={(e)=>setKey(e)}>
            <TabPane tab="Profile" key="1" >
              <Profile user={user} apiUrl={props.apiUrl} />
            </TabPane>
            <TabPane tab="Closet" key="2" >
              {
                orderData.map(item => {
                  return (
                    <div className="left">

                      <div className="myBag">
                        <img className="left-img" src={JSON.parse(item.productImg)[0].url}></img>
                        <div className="Stretch">
                          <h2 className="Stretch-h2">{item.productName}</h2>
                          <div className="Stretch-span-box">
                            <span className="Stretch-span">{item.colorEnName}</span>
                            <span className="Stretch-ONE">{item.sizeName}</span>
                           
                            {/* <Button >ADD TO BAG</Button> */}
                          </div>
                          <div className="size-box">
                            <div className="size">

                            </div>
                            <div className="itemPrice">
                              <span className="Stretch-span">itemPrice</span>
                              <a className="Stretch-span">${item.goodsPrice}</a>
                            </div>
                            
                            <div className="Total">
                              <span className="Stretch-span-total">Total Price</span>
                              <a className="Stretch-span">${item.totalAmount}</a>
                            </div>
                            <div className="Quantity">
                              <span className="Stretch-span">Quantity</span>
                              <a className="Stretch-span">{item.qty}</a>
                            </div>

                          </div>
                          {/* <div className="Free-box">
                            <span className="Free">Free Shipping + Free Returns</span>
                            <div className="Save-box">
                              <a className="Save Free">Save for Later</a>
                              <span className="Save-line"></span>
                              <a className="Save Free" onClick={() => {
                                Modal.confirm({
                                  title: 'remove item',
                                  icon: <ExclamationCircleOutlined />,
                                  content: 'Are you sure you want to remove this item from your bag?',
                                  okText: 'Yes,Remove this item',
                                  cancelText: 'No,keep this item',
                                  onOk: () => handleRemove(item),
                                });
                              }}>Remove</a>
                            </div>
                          </div> */}
                        </div>
                      </div>

                    </div>
                  )
                })
              }
            </TabPane>
            <TabPane tab="My Order" key="3" >
              <OrderList/>
            </TabPane>
            <TabPane tab="Shipping Address" key="4" >
              <Address user={user} apiUrl={props.apiUrl} showList={true} showBtn={true}/>
            </TabPane>
            
            
          </Tabs>
        </Col>
        <Col xs={1} md={3}></Col>

      </Row>

      <Footer navData={props.navData} siteData={props.siteInfo}/>


    </>
  );
}
export async function getServerSideProps(context) {
  const apiUrl = process.env.APIURL;
  console.log('apiurl', apiUrl)
  const navData = await request(`${apiUrl}/api/client/nav`);
  const newNavData = transData(navData.data, "id", "pid");
  const siteInfo = await request(`${apiUrl}/api/client/querySiteInfo`);
  console.log('process.env.APIURL account', process.env.APIURL)
  return {
    props: {
      navData: newNavData,
      apiUrl,
      siteInfo:siteInfo.data
    },
    // Re-generate the post at most once per second
    // if a request comes in
  };
}
